<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>采购合同</span>
    </div>
    <searchForm
      :form-data="filter_info"
      :form-title="formTitle"
      @search="search"
      @reset="reset"
    />
    <v-tableBtns
      :show-upload="true"
      :table-title="exportTitle"
      :table-data="exportData"
    />

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      :deletable="false"
      btn-class="btn"
      @sortChange="sortChange"
      @edit="edit"
    />
    <v-pagination
      :page-info="pageInfo"
      :get-table-list="getTableList"
    />

  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import searchForm from '@/views/components/searchForm'

export default {
  name: 'Home',
  components: { searchForm },
  data() {
    return {
      formTitle: [
        {
          cn: '合同编号: ',
          en: '合同编号'
        },
        {
          cn: '采购单位: ',
          en: '客户名称'
        },
        {
          cn: '我方负责人: ',
          en: '负责人'
        },
        {
          cn: '创建时间: ',
          en: 'created_at',
          type: 'time'
        }

      ],
      filter_info: {},
      // 排序
      sidx: 'create_time',
      sortKey: null,

      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      },
      tableTitle: [
        {
          cn: '合同编号',
          en: '合同编号',
          sortable:true
        },
        {
          cn: '对方单位名称',
          en: '对方单位名称',
        },
        {
          cn: '合作内容',
          en: '内容',
        },
        {
          cn: '我方负责人',
          en: '我方负责人',
        },
        {
          cn: '创建人',
          en: 'title',
          sortable:true
        },
        {
          cn: '合同状态',
          en: 'status',
          formatter:(row, column, cellValue, index)=>{
              switch (cellValue) {
                case 'COMPLETED':
                  return '已完成';
                case 'TERMINATED':
                  return '意外终止'
              }
          },
          sortable:true
        },
        {
          cn: '签约日期',
          en: 'create_time',
          sortable:true
        },
      ],
      tableData: [],

      exportTitle:[],
      exportData:[],

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ]),
    filter_infos() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (!this.filter_info[key] && this.filter_info[key] !== 0) {
          this.$delete(this.filter_info, key)
          continue
        }
        if (key === 'created_at') {
          data.start_time = origin[key][0]
          data.End_time = origin[key][1]
        } else {
          data[key] = origin[key]
        }
      }
      if (!origin.created_at) {
        delete data.start_time
        delete data.End_time
      }
      return data
    }
  },
  activated() {
    this.getTableList()
  },
  methods: {
    getTableList() {
      const loading = this.$loading()

      const datas = {
        page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
        sidx: this.sidx,
        sortKey: this.sortKey,
        ...this.filter_infos,
        contractType: 1
      }
      this.$get('action/ProcurementContract/dataGrid', datas)
        .then(res => {
          const list1 = res.data.list.map((item, index) => {
            const list2 = JSON.parse(item.form_component_values)
            const messages = JSON.parse(item.operation_records)
            const list4 = JSON.parse(item.tasks)
            const obj = {}
            list2.forEach(item => {
              let key = item.name
              let value = item.value === 'null' ? '' : item.value
              if (item.name === '合同条款') {
                key = '内容'
                value = JSON.parse(item.value)[0].rowValue[0].value || ''
              } else if (item.name === '附件') {
                value = item.value !== 'null' && JSON.parse(item.value)[0].fileName || ''
              }
              obj[key] = value
              item.create_time = item.签订日期
            })
            this.messages = messages.map(item => {
              const log_content = item.date + ',' + item.operation_result + ',' + item.operation_type + ',' + item.userid
              return { log_content }
            })
            for (const key in item) {
              obj[key] = item[key]
            }
            obj.tasks = list4
            obj.form_component_values = list2
            obj.title = obj.title.replace(/的合同审批/, '')
            return obj
          })
          this.pageInfo.totalPage = res.data.totalPage
          this.pageInfo.totalRow = res.data.totalRow
          this.tableData = list1 || [],
              loading.close()
        })
        .catch(_=>{
          loading.close()
          this.$message({
            message: '获取数据失败',
            type: 'error'
          })
        })
    },

    // 搜索
    search() {
      this.pageInfo.pageNumber=1
      this.getTableList()
    },
    reset() {
      this.filter_info = {};
      this.getTableList()
    },
    edit(val) {
      this.$router.push({
        name: 'bargain_manage.purchase.purchase_edit',
        params: {
          details: val.row
        }
      })
    },

    // 排序
    sortChange({ column, prop, order }) {
      this.sidx = prop || 'create_time'
      this.sortKey = order === 'ascending' ? 'asc' : null
      this.getTableList()
    }
  }
}
</script>

